<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>设置学科</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
	<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

	<!-- <link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/common.css"> -->
	<!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

	<!-- <script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
	<script>
		var vConsole = new VConsole();
	</script> -->



	<style type="text/css">
		body,
		.page {
			background: #fff;
		}

		.container {
			height: 100%;
			box-sizing: border-box;
			padding: 0.75rem 1rem 0;
			overflow-y: auto;
		}

		.nav-box {
			width: 100%;
			padding: 0 0 0.75rem;
		}

		.nav-wrap {
			box-sizing: border-box;
			width: 100%;
			border-radius: 0.4rem;
			box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, .1);
		}

		.nav-wrap .top {
			width: 100%;
			padding: 0.5rem 0;
			font-size: 0.7rem;
			color: #808080;
			text-align: center;
		}

		.bottom {
			display: flex;
			align-items: center;
			padding: 0.5rem 0;
			font-size: 0.7rem;
		}

		.bottom .bottom-left,
		.bottom .bottom-right {
			flex: 1;
			text-align: center;
			padding: 0 0.6rem;
			color: #808080;
		}

		.bottom .bottom-right {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5296f7;
			position: relative;
		}

		.bottom .bottom-right:active {
			color: rgb(82, 150, 247, 0.5);
		}

		.bottom .bottom-right::after {
			content: ' ';
			position: absolute;
			top: -50%;
			left: 0;
			bottom: -50%;
			transform: scale(0.5);
			border: 1px solid #EBEEF5;
		}

		.list-boxs {
			box-sizing: border-box;
		}

		.list-boxs .list {
			box-sizing: border-box;
			padding-bottom: 0.8rem;
		}

		.list-boxs .list .list-item {
			box-sizing: border-box;
			width: 100%;
			padding: 0 1rem;
			text-align: center;
			font-size: 0.75rem;
			border-radius: 2rem;
			line-height: 2rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			background: #f8f8f8;
		}

		.booktype-box {
			display: none;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">
			<div class="container">

				<div class="book-box">
					<div class="nav-box">
						<div class="nav-wrap">
							<div class="top">当前考试</div>
							<div class="bottom">
								<div class="bottom-left">
									<span class="book-value"></span>
								</div>
								<div class="bottom-right">
									<span>切换考试</span>
									<span class="icon icon-right"></span>
								</div>
							</div>
						</div>
					</div>

					<div class="list-boxs">
						<!-- <div class="list">
							<div class="list-item">语文</div>
						</div> -->
					</div>
				</div>


				<div class="booktype-box">
					<div class="nav-box">
						<div class="nav-wrap types">
							<div class="top">当前类型</div>
							<div class="bottom">
								<div class="bottom-left">
									<span class="book-value"></span>
								</div>
								<div class="bottom-right">
									<span>切换类型</span>
									<span class="icon icon-right"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="list-boxs">
						<!-- <div class="list">
							<div class="list-item">语文</div>
						</div> -->
					</div>
				</div>


			</div>
		</div>
	</div>




	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>

	<!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript'
		src='../../zepto/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> -->

	<!-- <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js' charset='utf-8'></script> -->
	<!-- <script src="http://47.104.254.28/commonfile/js/js/swiper/swiper.min.js"></script> -->

	<script type="text/javascript">

		function successCallBack(data) {
			if (!data.success) {
				$.toast(data.message, 1500);
			}
			$$('.booktype-box').hide();
			$$('.book-box').show();
			if(isNotNull(value3) && value3 != 'null'){
				$$('.book-box .book-value').text(value3);
			}
			
			if (isNotNull(data.data)) {
				let list = data.data;
				let html = ''
				for (let val of list) {
					html += `<div class="list">
						<div data-id="${val.id}" data-type="${val.book_type}" class="list-item">${val.book_name}</div>
					</div>`
				}
				$$('.book-box .list-boxs').html(html);
				$$('.book-box .list-item').on('click', function () {
					var values = {
						key3: $$(this).data('id'),
						value3: $$(this).text(),
						key2: isNotNull(key2) ? key2 : '',
						key1: isNotNull(key1) ? key1 : '',
						type: "setBook"
					}
					console.log(values)
					//发送value到本地,通知本地开始倒计时
					send_data(values);
				});
			}
		}

		function errorCallBack(data) {
			console.log(data)
		}

		function bookTypeSuccessCallBack(data) {
			if (!data.success) {
				$.toast(data.message, 1500);
			}
			$$('.book-box').hide();
			$$('.booktype-box').show();
			if (isNotNull(data.data)) {
				let list = data.data;
				let html = ''
				for (let val of list) {
					html += `<div class="list">
						<div data-id="${val.id}" data-parent="${val.parent_id}" data-level="${val.level}" class="list-item">${val.content}</div>
					</div>`
				}
				if (key2 && list && list[0].level == 2) {
					$$('.booktype-box .book-value').text(list[0].parent_name)
					$$('.booktype-box .nav-box').show();
				}
				if (list && list[0].level == 1) {
					$$('.booktype-box .nav-box').hide();
				}
				$$('.booktype-box .list-boxs').html(html);
				$$('.booktype-box .list-item').on('click', function () {
					let level = $$(this).data('level');
					if (level == 2) {
						key2 = $$(this).data('id')
						key1 = $$(this).data('parent')
						value3 = $$(this).text()

						let params = {
							offset: 0,
							limit: 50,
							book_price: '',
							book_type: key2
						}
						net_request('get', 'api/v1/books', params, successCallBack, errorCallBack);
					}

					if (level == 1) {
						// let params =  {
						// 	level: 2,
						// 	offset: 0,
						// 	limit: 50
						// }
						// if (isNotNull(key1)) {
						// 	params.parent_id = key1;
						// }
						key1 = $$(this).data('id')

						net_request('get', 'api/v1/booktype', {
							level: 2,
							offset: 0,
							limit: 50,
							parent_id: key1
						}, bookTypeSuccessCallBack, bookTypeErrorCallBack);
					}
				});
			}
		}

		function bookTypeErrorCallBack(data) {
			$.toast('网络不正常，请重试')
			console.log(data)
		}
		var key1 = null;
		var key2 = null;
		var key3 = null;
		var value3 = null;

		function getParams(data) {
			//	data需要转成json调用 ，函数urlParamParseJson();
			var jsonData = urlParamParseJson(data);
			console.log(jsonData)
			var params = {
				offset: 0,
				limit: 50,
				book_price: ''
			}
			if (isNotNull(jsonData.key1) && jsonData.key1 != 'null') {
				key1 = jsonData.key1;
			}
			if (isNotNull(jsonData.key2) && jsonData.key2 != 'null') {
				key2 = jsonData.key2;
				params.book_type = jsonData.key2;
			}
			if (isNotNull(jsonData.key3) && jsonData.key3 != 'null') {
				key3 = jsonData.key3;
			}
			if (isNotNull(jsonData.value3) && jsonData.value3 != 'null') {
				$$('.book-box .book-value').text(decodeURIComponent(jsonData.value3));
				value3 = decodeURIComponent(jsonData.value3);
			} else {
				$$('.book-box .book-value').text('');
			}

			net_request('get', 'api/v1/books', params, successCallBack, errorCallBack);

			// if (isNotNull(jsonData.book_type)) {
			// 	params.book_type = jsonData.book_type;
			// }
			// if (isNotNull(jsonData.book_value) && String(jsonData.book_value) != 'null') {
			// 	$$('.book-value').text(jsonData.book_value);
			// } else {
			// 	$$('.book-value').text('');
			// }

			// net_request('get', 'api/v1/books', params, successCallBack, errorCallBack);
			// net_request('get', 'api/v1/booktype', {
			// 	level: 2,
			// 	offset: 0,
			// 	limit: 50
			// }, bookTypeSuccessCallBack, bookTypeErrorCallBack);
		}

		$$(function () {
			$.init();
			// getParams('http://127.0.0.1:5501/html/view/subjectList.html?key2=2&value3=%E6%94%BF%E6%B2%BB')
		});

		$$('.book-box .bottom-right').on('click', function () {
			let params =  {
				level: 2,
				offset: 0,
				limit: 100
			}
			if (isNotNull(key1)) {
				params.parent_id = key1;
			}
			net_request('get', 'api/v1/booktype', params, bookTypeSuccessCallBack, bookTypeErrorCallBack);
		});

		$$('.booktype-box .bottom-right').on('click', function () {
			let params =  {
				level: 1,
				offset: 0,
				limit: 100
			}
			net_request('get', 'api/v1/booktype', params, bookTypeSuccessCallBack, bookTypeErrorCallBack);
		});



	</script>
</body>

</html>